<template>
        <div class="container">
            <div class='col-sm-8' style="height:500px;width:auto;overflow:scroll;background:#EEEEEE;"  ref="scroll" id="asd">
                <hr>
                <div v-for="item in books" :key="item.id">
                    <section v-for="book in item" :key="book._id">
                        <h5>{{ book._id }}</h5>
                        <h5>{{ book.title }}</h5>
                        <img src="..\assets\books\骆驼祥子.jpeg" alt="No image" style="width: 50%"/>
                        <p>{{ book.body }}
                            <Button @click="get_book(book.data)">仔细看看</Button>
                        </p>
                        <hr>
                    </section>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    name: 'library',
    data() {
        return {
            start: 0, // 开始下标
            count: 5, // 每次拉取的书籍数目
            books: [], // 存放书
            nobook: false,
            index: 1,
            isAchiveBottom: false,
            picture: 'file:///G:/DeskTop/end/pic/%E9%AA%86%E9%A9%BC%E7%A5%A5%E5%AD%90.jpeg',
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handlefunction, true)
    },
    methods: {
        get_book(id) {
            this.$router.push({
                name: 'bookdetail',
                params: {
                    connum: id,
                },
            })
        },
        async getData() {
            await fetch('http://localhost:5000/library', {
                method: 'post',
                body: JSON.stringify({
                    username: localStorage.getItem('userName'),
                    start: this.start,
                    count: this.count,
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    if (res.data !== 'There is no blogs') {
                        this.books.push(res.data)
                        // this.uploadImg = require('../assets/books/' + book.bookUrl)
                    } else {
                        this.nobook = true
                    }
                }
            )
        },
        // ArrayBuffer转为base64字符串
        arrayBufferToBase64(buffer) {
            // 第一步，将ArrayBuffer转为二进制字符串
            let binary = ''
            let bytes = new Uint8Array(buffer)
            let len = bytes.byteLength
            for (let i = 0; i < len; i++) {
                binary += String.fromCharCode(bytes[i])
            }
            // 将二进制字符串转为base64字符串
            return window.btoa(binary)
        },
        numberIncrement() {
            this.start += this.count
        },
        handlefunction() {
            const div = document.getElementById('asd')

            if (((div.scrollHeight - div.scrollTop - div.clientHeight) <= 5) && !this.isAchiveBottom && !this.nobook) {
                this.isAchiveBottom = true
                setTimeout(() => {
                    this.getData()
                    this.numberIncrement()
                    this.isAchiveBottom = false
                }, 500)
            }
        },
    },
    created() {
        this.getData()
        this.numberIncrement()
    },
}
</script>

<style scoped>
</style>
